<template>
	<view class="footprint">
		<view class="info-box" v-for="(item, index) in footList" :key="index">
			<view class="img">
				<view class="checkbox" v-if="check">
					<u-checkbox-group @change="checkboxGroupChange" active-color="#ff7b4c">
						<u-checkbox @change="checkboxChange" v-model="item.check" :name="item.id" :class="{ checkBox: check }"></u-checkbox>
					</u-checkbox-group>
				</view>
				<!-- <image src="../../static/my/commodity.png" mode=""></image> -->
				<image src="../../static/img/footprint.png" mode=""></image>
			</view>
			<view class="commodity">
				<view class="title">{{ item.title }}</view>
				<view class="price">￥{{ item.price }}</view>
			</view>
		</view>

		<view class="select" v-if="check">
			<view class="all" @click="eleAll">
				<u-checkbox-group><u-checkbox v-model="checkAll" :name="allText" @change="checkboxChangeAll"></u-checkbox></u-checkbox-group>
				{{ allText }}
			</view>
			<view class="del " :class="{ active: usable }" @click="del">删除</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			checkAll: false,
			allText: '全选',
			check: false,
			usable: false,
			footList: [
				{
					id: 1,
					img: '../../static/my/commodity.png',
					title: '花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '1.00',
					check: false
				},
				{
					id: 2,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '98.00',
					check: false
				},
				{
					id: 3,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '18.00',
					check: false
				},
				{
					id: 4,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '198.00',
					check: false
				},
				{
					id: 5,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '198.00',
					check: false
				},
				{
					id: 6,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '198.00',
					check: false
				},
				{
					id: 7,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '198.00',
					check: false
				},
				{
					id: 8,
					img: '../../static/my/commodity.png',
					title: '北纯 五常稻花香 东北大米2.5kg （无添加 长粒 米 五常大米 稻花香米 新老包装随机发货）',
					price: '198.00',
					check: false
				}
			]
		};
	},
	watch: {
		checkBox() {
			if (this.checkBox.length > 0) {
				this.usable = true;
			} else {
				this.usable = false;
			}

			if (this.checkBox.length === this.footList.length) {
				this.checkAll = true;
			} else {
				this.checkAll = false;
			}
		}
	},
	computed: {
		checkBox() {
			let arr = [];
			this.footList.forEach(item => {
				if (item.check) {
					arr.push(item.id);
				}
			});
			console.log(arr);

			return arr;
		}
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			// console.log('触发1', e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			// console.log('触发2', e);
		},
		checkboxChangeAll(e) {
			console.log('触发全选', e);
			this.checkAll = this.checkAll = !this.checkAll;
		},
		//全选
		eleAll() {
			let taht = this;
			taht.checkAll = !taht.checkAll;
			if (taht.checkAll) {
				taht.footList.forEach(item => {
					item.check = true;
				});
			} else {
				taht.footList.forEach(item => {
					item.check = false;
				});
			}
		},
		//删除
		del() {
			let that = this;
			if (that.checkBox.length == 0) {
				return;
			} else {
				console.log('删除');

				that.checkBox.map(item => {
					that.footList = that.footList.filter(t => t.id != item);
				});
			}
		}
	},
	onNavigationBarButtonTap(e) {
		this.check = !this.check;
	}
};
</script>

<style lang="scss" scoped>
.footprint {
	height: 100%;
	overflow: hidden;
	padding-bottom: 100upx;
}

.info-box {
	display: flex;
	align-items: center;
	height: 160upx;
	box-sizing: border-box;
	margin-top: 22upx;
	padding: 0 20upx;

	.img {
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 160upx;
			height: 160upx;
		}
	}

	.commodity {
		margin-left: 30upx;

		.title {
			line-height: 1.4;
			color: #000000;
			font-size: 24upx;
		}

		.price {
			padding-top: 20upx;
			color: #ff7b4c;
			font-size: 28upx;
		}
	}

	.checkbox {
		// width: 36upx;
		// height: 36upx;
		// box-sizing: border-box;
		// border: 1upx solid rgba(153, 153, 153, 1);
		// border-radius: 50%;
		// margin-right: 20upx;
	}
}

.select {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;

	.all {
		display: flex;
		align-items: center;
		justify-content: center;

		& > view {
			// width: 36upx;
			// height: 36upx;
			// box-sizing: border-box;
			// border: 1upx solid rgba(153, 153, 153, 1);
			// border-radius: 50%;
			margin: 0 0 0 20upx;
		}
	}

	.del {
		width: 160upx;
		height: 100upx;
		line-height: 100upx;
		background-color: #cccccc;
		box-sizing: border-box;
		border: 1upx solid rgba(248, 248, 248, 1);
		color: #ffffff;
		text-align: center;
		font-size: 28upx;
	}

	.active {
		background: linear-gradient(90deg, rgba(233, 144, 64, 1), rgba(255, 123, 76, 1));
	}
}

/deep/.u-checkbox__icon-wrap {
	border-radius: 50%;
}
/deep/.u-checkbox__icon-wrap--checked {
	// background-color: #ff7b4c !important;
	// border-color: #ff7b4c !important;
}
</style>
